<template>
  <el-drawer 
    v-model="drawer2" 
    :direction="direction" 
    :width="800"
    :before-close="handleClose"
  >
    <template #header>
      <h4 style="font-size: 16px; font-weight: 600;">详情</h4>
    </template>
    <template #default>
      <div class="detail-container">
        <!-- 标题区域 -->
        <div class="detail-title">
          {{ newsForm.newsTitle.split('-')[0] }}
        </div>

        <!-- 来源和时间区域 -->
        <div class="detail-meta">
          <span class="source">{{ newsForm.newsSource }}</span>
          <span class="time">{{ newsForm.newsTime }}</span>
          <a :href="newsForm.sourceUrl" target="_blank" class="original-link">原文链接</a>
        </div>

        <!-- 摘要区域 -->
        <div class="detail-summary">
          <p :class="{'summary-collapsed': !isExpanded}">{{ newsForm.abstractReal }}</p>
          <span v-if="ExpandBtn" class="expand-btn" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</span>
        </div>

        <!-- 正文内容区域 -->
        <div class="detail-content">
          <p v-html="newsForm.markContent && marked.parse(newsForm.markContent)"></p>
        </div>
      </div>
    </template>
    <template #footer>
        <div class="flex justify-end gap-2.5">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import {marked} from 'marked'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  newsData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const drawer2 = ref(props.modelValue)
const direction = ref<DrawerProps['direction']>('rtl')

// 新闻数据
const newsForm = ref({
  newsTitle: '',
  newsSource: '',
  newsTime: '',
  sourceUrl: '',
  abstractReal: '',
  markContent:''
})

// 新闻摘要展开/收起状态
const isExpanded = ref(false)
const ExpandBtn = ref(false)

// 新闻时间
const newsTime = ref('')

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  drawer2.value = newVal
})

// 监听 drawer2 变化，同步到 modelValue
watch(drawer2, (newVal) => {
  emit('update:modelValue', newVal)
})

// 切换展开/收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 监听新闻数据变化
watch(() => props.newsData, (newVal) => {
  if (newVal && Object.keys(newVal).length > 0) {
    newsForm.value = {
      newsTitle: newVal.newsTitle || '',
      newsSource: newVal.newsSource || '',
      sourceUrl: newVal.sourceUrl || '',
      newsTime: newVal.newsTime || '',
      abstractReal: newVal.abstractReal || '',
      markContent: newVal.markContent || '',
    }
    newsTime.value = newVal.createTime || ''
    
    // 重置展开状态
    isExpanded.value = false
    
    // 检查摘要内容是否超过两行
    const summaryLength = newsForm.value.abstractReal.length
    ExpandBtn.value = summaryLength > 100 // 设置100个字符超过两行
  }
}, { immediate: true })

// 关闭前回调
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要取消编辑吗？')
    .then(() => done())
    .catch(() => {})
}

// 取消按钮
const cancelClick = () => {
      drawer2.value = false
}

// 确定按钮
const confirmClick = () => {
      drawer2.value = false
}
</script>

<style scoped>
.el-overlay{
  background-color: #eee;
}


/* 详情容器样式 */
.detail-container {
  padding: 0 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
}

/* 标题样式 */
.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 来源和时间样式 */
.detail-meta {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}

.source {
  margin-right: 15px;
}

.time {
  margin-right: 15px;
}

.original-link {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

/* 摘要区域样式 */
.detail-summary {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-summary p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.summary-collapsed {
  max-height: 3.2em; /* 最多显示两行，溢出隐藏 */
  overflow: hidden;
  line-height: 1.6;
}

.expand-btn {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
  white-space: nowrap;
}

/* 正文内容样式 */
.detail-content {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
}

.detail-content p {
  margin: 0 0 20px 0;
}

.detail-content p:before {
  content: '';
  display: block;
  margin-bottom: 8px;
}

</style>